<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
				overflow: auto;
			}

			body::-webkit-scrollbar {
				width: 0px;
			}

			#box {
				/*中心点居中*/
				width: 100%;
				height: 100%;

			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="data.js" type="text/javascript" charset="utf-8"></script>
	<script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		document.oncontextmenu = function() {
			return false;
		};
		var _this;
		var chartDom = document.getElementById('box');
		var myChart = echarts.init(chartDom);

		myChart.setOption({
			tooltip: {
				trigger: 'item',
				triggerOn: 'mousemove'
			},
			series: [{
				//orient: 'vertical', //horizontal  vertical
				roam: true,
				type: 'tree',
				data: [data],
				initialTreeDepth: -1,
				symbolSize: 10,
				label: {
					position: 'left',
					verticalAlign: 'middle',
					align: 'right',
					fontSize: 9					
				},
				leaves: {
					label: {
						position: 'right',
						verticalAlign: 'middle',
						align: 'left'
					}
				},
				emphasis: {
					focus: 'none'
				},
				expandAndCollapse: true,
				animationDuration: 0,
				animationDurationUpdate: 0
			}]
		})
		// "children": [{
		// 							"id": 732,
		// 							"name": "测试1"
		// 						}, {
		// 							"id": 731,
		// 							"name": "测试2"
		// 						}]		

		myChart.on("contextmenu", function(e) {
			layer.open({
				title: '提示',
				content: e.data.id
			});
		})

		myChart.on("click", function(e) {
			var tg = e.data
if(tg.children){
if (tg.children.length == 0) {
				tg.children = [{
					"id": 6025,
					"name": "测试1",
					"children": []
				}, {
					"id": 9661,
					"name": "测试2",
					"children": []
				}]
				myChart.setOption({
					data: [data]
				})
			}
}
			
		})



		var allNode = 0;
		var nodes = myChart._chartsViews[0]._data._graphicEls;
		for (var i = 0, count = nodes.length; i < count; i++) {
			var node = nodes[i];
			if (node === undefined)
				continue;
			allNode++;
		}
		// var height = window.innerHeight;
		// var currentHeight = 50 * allNode;
		// var newWidth = Math.max(currentHeight, height);
		// chartDom.style.width = window.innerWidth + 'px';
		// chartDom.style.height = newWidth + 'px';
		// myChart.resize();

		var w = window.innerHeight;
		var nw = 50 * allNode;
		var nnw = Math.max(nw, w);
		chartDom.style.width = window.innerWidth + 'px';
		chartDom.style.height = nnw + 'px';

		myChart.resize();
		//不要用html
		$('body').animate({
			scrollTop: nnw / 2.5
		});

		$('body').scrollTop(nnw / 2.5)
	</script>
</html>
